/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
fieldset, img, input, button { 			/*fieldset组合表单中的相关元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
ul, ol {
    list-style: none;				/*清除列表风格*/
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}
select, input {
    vertical-align: middle;
}
select, input, textarea {
    font-size: 12px;
    margin: 0;
}
textarea {
    resize: none;
}
/*防止多行文本框拖动*/
img {
    border: 0;
    vertical-align: middle;
}
/*  去掉图片低测默认的3像素空白缝隙*/
table {
    border-collapse: collapse;			/*合并外边线*/
}
body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";	/*宋体，Unicode，统一码*/
    color: #666;
    background: #fff;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #C81623;
}
h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}
s, i, em {
    font-style: normal;
    text-decoration: none;
}
.col-red {
    color: #C81623 !important;
}
*,
::before,
::after{
    /*设置所有的盒子都是以边框开始计算  使用的都流式布局*/
    -webkit-box-sizing: border-box;/*要求兼容主流浏览器 webkit内核的必须*/
    box-sizing: border-box;
    /*清除移动端默认的点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
}
@media screen and (max-width:399px) {
    html {
        font-size: 15px;
    }
}
@media (min-width: 400px) and (max-width: 480px) {
    html {
        font-size: 20px;
    }
}
@media screen and (min-width: 481px) {
    html {
        font-size: 25px;
    }
}
/* 设置HTML5元素为块 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}
/* 图片自适应 */
img {
    display: block;
    max-width: 100%;
    height: auto;
    width:auto\9; /* ie8 */
    -ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
}
/* 禁用iPhone中Safari的字号自动调整 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/* 去除iPhone中默认的input样式 */
input[type="submit"],

input[type="reset"],

input[type="button"],

input{-webkit-appearance:none; resize: none;}

/*公共类*/
.fl {
    float: left
}
.fr {
    float: right
}
.al {
    text-align: left
}
.ac {
    text-align: center
}
.ar {
    text-align: right
}

/* 分页器 begin */
.swiper-pagination {
    width: 2.5rem;
    height: 100%;
    background: url("../images/scrollbar.png") no-repeat;
    -webkit-background-size: 2.5rem 100%;
    background-size: 2.5rem 100%;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 100% auto auto auto;
    width: 1.5rem;
    height: 1.8rem;
    background: transparent;
    border: 1px solid #4EA9C2;
    color: #4EA9C2;
    opacity: 1;
    font: 700 1rem/1.5rem "微软雅黑";
    text-shadow: 0.04rem 0.04rem 0.12rem;
    box-shadow: inset 0.04rem 0.04rem 0.12rem #4EA9C2, 0.04rem 0.04rem 0.12rem #4EA9C2;
    position: relative;
    top: 25%;
    margin-top: 1.5rem;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #82F6D8;
    color: purple;
    border-color: purple;
    box-shadow: inset 0.04rem 0.04rem 0.12rem purple, 0.04rem 0.04rem 0.12rem purple;
}
/* 分页器 end */

/* 左右缓动动画-1 begin */
@keyframes inching-1 {
    0% {
        left: 100%;
    }
    25% {
        left: 10%;
    }
    50% {
        left: 20%;
    }
    75% {
        left: 13%;
    }
    90% {
        left: 17%;
    }
    100% {
        left: 15%;
    }
}
@-webkit-keyframes inching-1 {
    0% {
        left: 100%;
    }
    25% {
        left: 10%;
    }
    50% {
        left: 20%;
    }
    75% {
        left: 13%;
    }
    90% {
        left: 17%;
    }
    100% {
        left: 15%;
    }
}
/* 左右缓动动画-1 end */

/* 左右缓动动画-2 begin */
@keyframes inching-2 {
    0% {
        left: -4%;
    }
    50% {
        left: 25%;
    }
    100% {
        left: -4%;
    }
}
@-webkit-keyframes inching-2 {
    0% {
        left: -4%;
    }
    50% {
        left: 25%;
    }
    100% {
        left: -4%;
    }
}
/* 左右缓动动画-2 end */

/* 上下缓动动画 begin */
@keyframes inching-3 {
    0% {
        top: -15%;
    }
    50% {
        top: -22%;
    }
    100% {
        top: -15%;
    }
}
@-webkit-keyframes inching-3 {
    0% {
        top: -15%;
    }
    50% {
        top: -22%;
    }
    100% {
        top: -15%;
    }
}
/* 上下缓动动画 end */

/* 旋转X轴动画 begin */
@keyframes rotateX {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
    50% {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}
@-webkit-keyframes rotateX {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
    50% {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}
/* 旋转X轴动画 end */

/* 扇形动画 begin */
@keyframes secto {
    0% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    50% {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    100% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
}
@-webkit-keyframes secto {
    0% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    50% {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    100% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
}
/* 扇形动画 end */

/* 柱子动画 begin */
@keyframes side {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes side {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}@keyframes side-2 {
     0% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }
     50% {
         -webkit-transform: scale(0.5);
         transform: scale(0.5);
     }
     100% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }
 }
 @-webkit-keyframes side-2 {
     0% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }
     50% {
         -webkit-transform: scale(0.5);
         transform: scale(0.5);
     }
     100% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }
 }
/* 柱子动画 end */

/* 公用旋转动画 begin */
@keyframes communal-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes communal-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@keyframes communal-rotate-2 {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    50% {
        -webkit-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
    80% {
        -webkit-transform: rotateZ(180deg);
        transform: rotateZ(180deg);
    }
    100% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
@-webkit-keyframes communal-rotate-2 {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    50% {
        -webkit-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
    80% {
        -webkit-transform: rotateZ(180deg);
        transform: rotateZ(180deg);
    }
    100% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
/* 公用旋转动画 end */

/* 射灯左公用 begin */
@keyframes spotlight-L {
    0%{
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
    }
    50%{
        -webkit-transform: rotateZ(-7deg);
        transform: rotateZ(-7deg);
    }
    100%{
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
    }
}
@-webkit-keyframes  spotlight-L {
    0%{
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
    }
    50%{
        -webkit-transform: rotateZ(-7deg);
        transform: rotateZ(-7deg);
    }
    100%{
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
    }
}
.spotlight-left {
    position: absolute;
    top: 0rem;
    left: 0rem;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-animation: spotlight-L 3s linear infinite;
    animation: spotlight-L 3s linear infinite;
}
/* 射灯左公用 end */

/* 射灯右公用 begin */
@keyframes spotlight-r {
    0%{
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    50%{
        -webkit-transform: rotateZ(15deg);
        transform: rotateZ(15deg);
    }
    100%{
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
@-webkit-keyframes spotlight-r {
    0%{
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    50%{
        -webkit-transform: rotateZ(15deg);
        transform: rotateZ(15deg);
    }
    100%{
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
.spotlight-right {
    position: absolute;
    top: 0rem;
    right: 0rem;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation: spotlight-r 3s linear infinite;
    animation: spotlight-r 3s linear infinite;
}
/* 射灯右公用 end */

/* 下箭头公用 begin */
@keyframes arrows {
    0% {
        bottom: 1rem;
        width: 3rem;
    }
    50% {
        bottom: 3rem;
        width: 2.5rem;
    }
    100% {
        bottom: 1rem;
        width: 3rem;
    }
}
@-webkit-keyframes arrows {
    0% {
        bottom: 1rem;
        width: 3rem;
    }
    50% {
        bottom: 3rem;
        width: 2.5rem;
    }
    100% {
        bottom: 1rem;
        width: 3rem;
    }
}
.arrows {
    position: absolute;
    left: 50%;
    margin-left: -1.5rem;
    -webkit-animation: arrows 3s ease-in-out infinite;
    animation: arrows 3s ease-in-out infinite;
}
/* 下箭头动画公用 end */

/* 风车公用 begin */
@keyframes communal-rotate-zoom {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        width: 5rem;
    }
    50% {
        width: 8rem;
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
        width: 5rem;
    }
}
@-webkit-keyframes communal-rotate-zoom {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        width: 5rem;
    }
    50% {
        width: 8rem;
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
        width: 5rem;
    }
}
.windmill-1 {
    position: absolute;
    bottom: 1rem;
    left: -3rem;
    width: 10rem;
    -webkit-animation: communal-rotate 1s linear infinite;
    animation: communal-rotate 1s linear infinite;
}
.windmill-2 {
    position: absolute;
    top: -1rem;
    right: -1rem;
    -webkit-animation: communal-rotate-zoom 3s linear infinite;
    animation: communal-rotate-zoom 3s linear infinite;
}
/* 风车公用 end */